﻿@{
    ViewBag.Title = "IBK Berget";
}

@model List<IBKBerget.Models.Articles>

<script type="text/javascript">

    $(document).ready(function () {

        $('.banner').show("slide", { direction: "left" }, 1000);
        $('.box, .smallbox').toggle('slow');

    });
                                  
</script>    

<p>

</p>

<div id="mainTop">
<div class="box" style="background-color:#E51400">
    <h3>Match mot Kaskelotterna</h3>
    <p>
        Söndagen den 18 november
        Gränbyskolan kl 11:30
    </p>
</div>
<div class="box" style="background-color:#EA005A">
    <h3>Träning</h3>
    <p>
        Lördagen den 17 november<br />
        Tiundaskolan kl 18:00 - 19:00
    </p>
</div>
<div style="clear:both;"></div>
</div>
<div class="banner">
    <div class="bannerContent">
        <a class="bannerLink" href="#">
        <div class="bannerBox">
            <div>
                <div class="bannerLinkBox">
                    <p>Korpen division 2<br />
                    Seriespel 2012-2013</p>
                </div>
                <div class="bannerLinkHeader">
                    <h3>Vilket lag leder serien?</h3>
                </div>
            </div>
        </div>
        </a>
    </div>
</div>
<div id="mainBottom">
<div style="clear:both;">
@foreach(var article in Model.Take(3))
{
    <a href="#">
    <div class="smallbox" style="background-color:#125e8b">
        <span style="font-size:small">@article.CreatedDate.ToShortDateString()</span>
        <h4>@article.Headline</h4>
        <p style="font-size:small;">
            @article.Summary
        </p>
    </div>
    </a>
}
</div>
<div style="clear:both;">
@foreach(var article in Model.Skip(3).Take(3))
{
    <a href="#">
    <div class="smallbox" style="background-color:#125e8b">
        <span style="font-size:small">@article.CreatedDate.ToShortDateString()</span>
        <h4>@article.Headline</h4>
        <p style="font-size:small;">
            @article.Summary
        </p>
    </div>
    </a>
}
</div>
<div style="clear:both;">
</div>
<div style="clear:both;">
</div>
</div>